<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-liquidfill.min.js"></script>

    
</head>
<body>
    <style>.box {  }; </style>
    <div class="box">
                <div id="937cb67e3b3245acabca4e5dde6d52fb" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_937cb67e3b3245acabca4e5dde6d52fb = echarts.init(
            document.getElementById('937cb67e3b3245acabca4e5dde6d52fb'), 'white', {renderer: 'canvas'});
        var option_937cb67e3b3245acabca4e5dde6d52fb = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u5546\u5bb6A",
            "data": [
                7,
                27,
                14,
                22,
                13,
                27,
                12,
                16,
                4,
                2,
                22,
                10,
                28,
                9,
                22,
                13,
                15,
                16,
                29,
                28,
                22,
                8,
                24,
                9,
                17,
                18,
                25,
                12,
                18,
                15
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5546\u5bb6A"
            ],
            "selected": {
                "\u5546\u5bb6A": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "0\u5929",
                "1\u5929",
                "2\u5929",
                "3\u5929",
                "4\u5929",
                "5\u5929",
                "6\u5929",
                "7\u5929",
                "8\u5929",
                "9\u5929",
                "10\u5929",
                "11\u5929",
                "12\u5929",
                "13\u5929",
                "14\u5929",
                "15\u5929",
                "16\u5929",
                "17\u5929",
                "18\u5929",
                "19\u5929",
                "20\u5929",
                "21\u5929",
                "22\u5929",
                "23\u5929",
                "24\u5929",
                "25\u5929",
                "26\u5929",
                "27\u5929",
                "28\u5929",
                "29\u5929"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "Bar-DataZoom\uff08slider-\u6c34\u5e73\uff09",
            "padding": 5,
            "itemGap": 10
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        }
    ]
};
        chart_937cb67e3b3245acabca4e5dde6d52fb.setOption(option_937cb67e3b3245acabca4e5dde6d52fb);
    </script>
<br/>                <div id="02ee2d8874bb43209eccf0add8a09ce4" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_02ee2d8874bb43209eccf0add8a09ce4 = echarts.init(
            document.getElementById('02ee2d8874bb43209eccf0add8a09ce4'), 'white', {renderer: 'canvas'});
        var option_02ee2d8874bb43209eccf0add8a09ce4 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "line",
            "name": "\u5546\u5bb6A",
            "connectNulls": false,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "\u6cb3\u9a6c",
                    33
                ],
                [
                    "\u87d2\u86c7",
                    144
                ],
                [
                    "\u8001\u864e",
                    102
                ],
                [
                    "\u5927\u8c61",
                    139
                ],
                [
                    "\u5154\u5b50",
                    87
                ],
                [
                    "\u718a\u732b",
                    149
                ],
                [
                    "\u72ee\u5b50",
                    106
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "markPoint": {
                "label": {
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                },
                "data": [
                    {
                        "type": "min"
                    }
                ]
            },
            "zlevel": 0,
            "z": 0
        },
        {
            "type": "line",
            "name": "\u5546\u5bb6B",
            "connectNulls": false,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "\u6cb3\u9a6c",
                    56
                ],
                [
                    "\u87d2\u86c7",
                    28
                ],
                [
                    "\u8001\u864e",
                    41
                ],
                [
                    "\u5927\u8c61",
                    73
                ],
                [
                    "\u5154\u5b50",
                    127
                ],
                [
                    "\u718a\u732b",
                    109
                ],
                [
                    "\u72ee\u5b50",
                    34
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "markPoint": {
                "label": {
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                },
                "data": [
                    {
                        "type": "max"
                    }
                ]
            },
            "zlevel": 0,
            "z": 0
        }
    ],
    "legend": [
        {
            "data": [
                "\u5546\u5bb6A",
                "\u5546\u5bb6B"
            ],
            "selected": {
                "\u5546\u5bb6A": true,
                "\u5546\u5bb6B": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u6cb3\u9a6c",
                "\u87d2\u86c7",
                "\u8001\u864e",
                "\u5927\u8c61",
                "\u5154\u5b50",
                "\u718a\u732b",
                "\u72ee\u5b50"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "Line-MarkPoint",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_02ee2d8874bb43209eccf0add8a09ce4.setOption(option_02ee2d8874bb43209eccf0add8a09ce4);
    </script>
<br/>                <div id="8f0b0807b5e94a208bd1565abd3ea8f9" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_8f0b0807b5e94a208bd1565abd3ea8f9 = echarts.init(
            document.getElementById('8f0b0807b5e94a208bd1565abd3ea8f9'), 'white', {renderer: 'canvas'});
        var option_8f0b0807b5e94a208bd1565abd3ea8f9 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u5468\u4e00",
                    "value": 61
                },
                {
                    "name": "\u5468\u4e8c",
                    "value": 61
                },
                {
                    "name": "\u5468\u4e09",
                    "value": 36
                },
                {
                    "name": "\u5468\u56db",
                    "value": 106
                },
                {
                    "name": "\u5468\u4e94",
                    "value": 22
                },
                {
                    "name": "\u5468\u516d",
                    "value": 139
                },
                {
                    "name": "\u5468\u65e5",
                    "value": 149
                }
            ],
            "radius": [
                "30%",
                "75%"
            ],
            "center": [
                "25%",
                "50%"
            ],
            "roseType": "radius",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            }
        },
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u5468\u4e00",
                    "value": 146
                },
                {
                    "name": "\u5468\u4e8c",
                    "value": 36
                },
                {
                    "name": "\u5468\u4e09",
                    "value": 98
                },
                {
                    "name": "\u5468\u56db",
                    "value": 130
                },
                {
                    "name": "\u5468\u4e94",
                    "value": 54
                },
                {
                    "name": "\u5468\u516d",
                    "value": 92
                },
                {
                    "name": "\u5468\u65e5",
                    "value": 25
                }
            ],
            "radius": [
                "30%",
                "75%"
            ],
            "center": [
                "75%",
                "50%"
            ],
            "roseType": "area",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5468\u4e00",
                "\u5468\u4e8c",
                "\u5468\u4e09",
                "\u5468\u56db",
                "\u5468\u4e94",
                "\u5468\u516d",
                "\u5468\u65e5"
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "Pie-\u73ab\u7470\u56fe\u793a\u4f8b",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_8f0b0807b5e94a208bd1565abd3ea8f9.setOption(option_8f0b0807b5e94a208bd1565abd3ea8f9);
    </script>
<br/>                <div id="0133e9eb37114accb9be148542f61482" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_0133e9eb37114accb9be148542f61482 = echarts.init(
            document.getElementById('0133e9eb37114accb9be148542f61482'), 'white', {renderer: 'canvas'});
        var option_0133e9eb37114accb9be148542f61482 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#5793f3",
        "#d14a61",
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u84b8\u53d1\u91cf",
            "yAxisIndex": 0,
            "data": [
                2.0,
                4.9,
                7.0,
                23.2,
                25.6,
                76.7,
                135.6,
                162.2,
                32.6,
                20.0,
                6.4,
                3.3
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            }
        },
        {
            "type": "bar",
            "name": "\u964d\u6c34\u91cf",
            "yAxisIndex": 1,
            "data": [
                2.6,
                5.9,
                9.0,
                26.4,
                28.7,
                70.7,
                175.6,
                182.2,
                48.7,
                18.8,
                6.0,
                2.3
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            }
        },
        {
            "type": "line",
            "name": "\u5e73\u5747\u6e29\u5ea6",
            "connectNulls": false,
            "yAxisIndex": 2,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "1\u6708",
                    2.0
                ],
                [
                    "2\u6708",
                    2.2
                ],
                [
                    "3\u6708",
                    3.3
                ],
                [
                    "4\u6708",
                    4.5
                ],
                [
                    "5\u6708",
                    6.3
                ],
                [
                    "6\u6708",
                    10.2
                ],
                [
                    "7\u6708",
                    20.3
                ],
                [
                    "8\u6708",
                    23.4
                ],
                [
                    "9\u6708",
                    23.0
                ],
                [
                    "10\u6708",
                    16.5
                ],
                [
                    "11\u6708",
                    12.0
                ],
                [
                    "12\u6708",
                    6.2
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "zlevel": 0,
            "z": 0
        }
    ],
    "legend": [
        {
            "data": [
                "\u84b8\u53d1\u91cf",
                "\u964d\u6c34\u91cf",
                "\u5e73\u5747\u6e29\u5ea6"
            ],
            "selected": {
                "\u84b8\u53d1\u91cf": true,
                "\u964d\u6c34\u91cf": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "axis",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "cross"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "1\u6708",
                "2\u6708",
                "3\u6708",
                "4\u6708",
                "5\u6708",
                "6\u6708",
                "7\u6708",
                "8\u6708",
                "9\u6708",
                "10\u6708",
                "11\u6708",
                "12\u6708"
            ]
        }
    ],
    "yAxis": [
        {
            "name": "\u964d\u6c34\u91cf",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#5793f3"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{value} ml"
            },
            "inverse": false,
            "position": "right",
            "offset": 80,
            "splitNumber": 5,
            "min": 0,
            "max": 250,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        {
            "type": "value",
            "name": "\u84b8\u53d1\u91cf",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#d14a61"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{value} ml"
            },
            "inverse": false,
            "position": "right",
            "offset": 0,
            "splitNumber": 5,
            "min": 0,
            "max": 250,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        {
            "type": "value",
            "name": "\u6e29\u5ea6",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#675bba"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{value} \u00b0C"
            },
            "inverse": false,
            "position": "left",
            "offset": 0,
            "splitNumber": 5,
            "min": 0,
            "max": 25,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "Grid-\u591a Y \u8f74\u793a\u4f8b",
            "padding": 5,
            "itemGap": 10
        }
    ],
    "grid": [
        {
            "left": "5%",
            "right": "20%",
            "containLabel": false
        }
    ]
};
        chart_0133e9eb37114accb9be148542f61482.setOption(option_0133e9eb37114accb9be148542f61482);
    </script>
<br/>                <div id="a195313cc3374ddc8615fe1fcef4fdda" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_a195313cc3374ddc8615fe1fcef4fdda = echarts.init(
            document.getElementById('a195313cc3374ddc8615fe1fcef4fdda'), 'white', {renderer: 'canvas'});
        var option_a195313cc3374ddc8615fe1fcef4fdda = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "liquidFill",
            "name": "lq",
            "data": [
                0.3254
            ],
            "waveAnimation": true,
            "animationDuration": 2000,
            "animationDurationUpdate": 1000,
            "color": [
                "#294D99",
                "#156ACF",
                "#1598ED",
                "#45BDFF"
            ],
            "shape": "circle",
            "outline": {
                "show": true
            },
            "label": {
                "show": true,
                "position": "inside",
                "margin": 8,
                "fontSize": 50,
                "formatter": function (param) {                        return (Math.floor(param.value * 10000) / 100) + '%';                    }
            }
        }
    ],
    "legend": [
        {
            "data": [],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "Liquid-\u6570\u636e\u7cbe\u5ea6",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_a195313cc3374ddc8615fe1fcef4fdda.setOption(option_a195313cc3374ddc8615fe1fcef4fdda);
    </script>
<br/>                        <style>
            .fl-table {
                margin: 20px;
                border-radius: 5px;
                font-size: 12px;
                border: none;
                border-collapse: collapse;
                max-width: 100%;
                white-space: nowrap;
                word-break: keep-all;
            }

            .fl-table th {
                text-align: left;
                font-size: 20px;
            }

            .fl-table tr {
                display: table-row;
                vertical-align: inherit;
                border-color: inherit;
            }

            .fl-table tr:hover td {
                background: #00d1b2;
                color: #F8F8F8;
            }

            .fl-table td, .fl-table th {
                border-style: none;
                border-top: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-bottom: 3px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                padding: .5em .55em;
                font-size: 15px;
            }

            .fl-table td {
                border-style: none;
                font-size: 15px;
                vertical-align: center;
                border-bottom: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                height: 30px;
            }

            .fl-table tr:nth-child(even) {
                background: #F8F8F8;
            }
        </style>
        <div id="9344838703bb4036955e04fcd8a1a1e3" class="chart-container" style="">
            <p class="title" style="font-size: 18px; font-weight:bold;" > Table</p>
            <p class="subtitle" style="font-size: 12px;" > </p>
            <table class="fl-table">
    <tr>
        <th>City name</th>
        <th>Area</th>
        <th>Population</th>
        <th>Annual Rainfall</th>
    </tr>
    <tr>
        <td>Brisbane</td>
        <td>5905</td>
        <td>1857594</td>
        <td>1146.4</td>
    </tr>
    <tr>
        <td>Adelaide</td>
        <td>1295</td>
        <td>1158259</td>
        <td>600.5</td>
    </tr>
    <tr>
        <td>Darwin</td>
        <td>112</td>
        <td>120900</td>
        <td>1714.7</td>
    </tr>
    <tr>
        <td>Hobart</td>
        <td>1357</td>
        <td>205556</td>
        <td>619.5</td>
    </tr>
    <tr>
        <td>Sydney</td>
        <td>2058</td>
        <td>4336374</td>
        <td>1214.8</td>
    </tr>
    <tr>
        <td>Melbourne</td>
        <td>1566</td>
        <td>3806092</td>
        <td>646.9</td>
    </tr>
    <tr>
        <td>Perth</td>
        <td>5386</td>
        <td>1554769</td>
        <td>869.4</td>
    </tr>
</table>
        </div>

<br/>    </div>
    <script>
    </script>
</body>
</html>
